<template>
    <div class="data-table">
        <form-layout
            class="data-form"
            ref="data_form"
            :form="form"
            :config="config"
        >
            <template slot="footer" slot-scope="scope">
                <div class="data-form-info-btn">
                    <el-button type="primary" @click.stop.native="onSubmit(scope)">搜索</el-button>
                    <el-button type="primary" plain 
                        @click.stop.native="onReset(scope)"
                    >重置</el-button>
                </div>
            </template>
        </form-layout>
        <div class="data-table-btnlist">
            <el-button
                type="primary"
                class="primary"
                size="small"
                icon="el-icon-printer"
                plain
                @click.stop.native="batchPrintQrProduce"
            >
                批量打印
            </el-button>
        </div>
        <div class="data-table-table">
            <pagination-table
                :list="list"
                :options="options"
                :columns="columns"
                :pagination="pagination"
                :get-list="getList"
                @handleSelectionChange="handleSelectionChange"
            />
        </div>
    </div>
</template>

<script>
// 组合批量打印ids
// import Qs from 'qs'
// 显示二维码图片组件
import SvgDetail from './svgDetail'
// 获取列表接口
import { Sample_Qrcode_List } from '@/server/sampleQrcodeManage'

export default {
    data() {
        return {
            form: {
                taskCode: ''
            },
            config: {
                labelWidth: '120px',
                fieldsConfig: [{
                    cols: 6,
                    name: 'taskCode',
                    label: '任务单编号：',
                    size: 'medium',
                    placeholder: '请输入任务单编号',
                    clearable: true
                }, {
                    cols: 6,
                    size: 'medium',
                    slot: 'footer'
                }]
            },
            selectionRows: [],
            list: [],
            columns: [
                {
                    width: 120,
                    prop: "taskCode",
                    label: "任务单编号",
                },
                {
                    prop: "sampleCodePath",
                    label: "二维码",
                    render: (h, params) => {
                        let sampleCodePath = params.row.sampleCodePath
                        if (!sampleCodePath) return (
                            <div class="data-table-qr-notcode">
                                <svg-icon name="not-have-data"/>    
                            </div>
                        )
                        return (
                            <div class="data-table-qr-code">
                                <svg-icon name="qr-code"  onClick={this.onSvgClickDialog.bind(this,params.row)}/>    
                            </div>
                        )
                    }
                },
                {
                    prop: "sampleCodeCreateTime",
                    label: "生成日期",
                },
                {
                    width: 100,
                    prop: "scanNum",
                    label: "扫码次数",
                },
                {
                    label: "操作",
                    render: (h, params) => {
                        return (
                            <div class="btn-text">
                                <el-button
                                    type="text"
                                    icon="el-icon-printer"
                                    onClick={this.printQrProduce.bind(this,params.row)}
                                >
                                    打印
                                </el-button>
                            </div>
                        )
                    },
                },
            ],
            options: {
                index: false,
                initTable: true,
                border: false,
                selection: true,
                mutiSelect: true,
                headerCellStyle: {
                    backgroundColor: "#E8F3FF",
                    color: "#3D4256 ",
                },
            },
            pagination: {
                show: true,
                total: 0,
                currentPage: 1,
                pageSize: 15,
            }
        };
    },
    methods: {
        // 重置按钮
        onReset(scope) {
            // 表单重置
            scope.rf()
            // 查询列表
            this.getList()
        },
        // 搜索按钮
        onSubmit(scope) {
            if (scope.sf()) {
                if( this.form['taskCode'] === '' ) {
                    return;
                }
                this.getList()
            }
        },
        // 点击放大
        onSvgClickDialog(row, event) {
            // 阻止事件冒泡 - 避免再次确认undefined
            event && event.stopPropagation()
            let instance = this.$dialog.show(SvgDetail, {
                title: '二维码预览',
                width: '36%',
                height: '36%',
            }, row)
            instance.onDidClose = () => {
                // this.getList()
            }
        },
        // 勾选存储状态
        handleSelectionChange(val) {
            this.selectionRows = val
        },
        // 批量打印二维码
        batchPrintQrProduce() {
            if( this.selectionRows.length !== 0 ) {
                // 声明变量
                let ids = [];
                // 存储id
                this.selectionRows.map(row => {
                    ids.push(row['sampleId'])
                })
                // 拼接ids
                // let idsStr = Qs.stringify({ids:ids},{arrayFormat:'comma'})
                let idsStr = ids.join("','")
                // 环境变量获取ip
                let ip = process.env.VUE_APP_API_PRINTIP
                // 跳转打印地址
                let url = `${ip}/WebReport/ReportServer?reportlet=sample.cpt&op=write&ids=${idsStr}`
                // 打开界面
                window.open(url)
                // 重新调用列表
                this.getList()
                return;
            }
            this.$message.warning('请先勾选要生成信息')
        },
        // 单行打印二维码
        printQrProduce(row, event) {
            // 阻止事件冒泡 - 避免再次确认undefined
            event && event.stopPropagation()
            // 环境变量获取ip
            let ip = process.env.VUE_APP_API_PRINTIP
            // 跳转打印地址
            let url = `${ip}/WebReport/ReportServer?reportlet=sample.cpt&op=write&ids=${row['sampleId']}`
            // 打开界面
            window.open(url)
        },
        async getList() {    
            // 列表loading
            this.options.loading = true
            // 获取列表
            let params = {
                taskCode: this.form['taskCode'],
                pageNum: this.pagination['currentPage'],
                pageSize: this.pagination['pageSize']
            }
            for( let key in params ) {
                if( params[key] === '' ) {
                    delete params[key]
                }
            }
            let data = await Sample_Qrcode_List(params)
            // 总条数
            this.pagination['total'] = data['total']
            // 列表数据
            this.list = data['rows']
            // 结束loading
            this.options.loading = false
        },
    },
};
</script>

<style lang="scss" scoped>
.data-table {
    padding: 5px 0;
    overflow: hidden;
    &-btnlist {
        float: right;
        margin-bottom: 28px;
    }
    &-table {
        color: #fff;
    }
    ::v-deep .data-table-qr-notcode {
        font-size: 60px;
        color: #000;
    }
    ::v-deep .data-table-qr-code {
        font-size: 50px;
        color: rgba(0, 0, 0, 1);
        cursor: pointer;
        &:hover {
            color: rgba(0, 0, 0, 0.6);
        }
    }
    ::v-deep .btn-text {
        color: #fff;
        .el-button--text {
            &:nth-of-type(2) {
                color: #e6a23c;
                &:hover {
                    color: #ebb563;
                }
            }
        }
        .el-popover__reference-wrapper {
            margin-left: 10px;
            .el-button--text {
                // color: #f56c6c;
                &:hover {
                    // color: #f78989;
                }
            }
        }
    }
}
</style>
